{% extends '_layout.html' %}
{% block style %}
    <style>
        .card {
            margin-top: 10px;
        }
        .result{
            margin-left:20px;
        }
    </style>
{% endblock %}
{% block main %}
    <div class="card">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">
                <button class="btn btn-info" id="train-lr">Adaboost训练</button>
                <span id="train-result-lr"  class="result"></span>
            </li>
            <li class="list-group-item">
                <button class="btn btn-success" id="train-tree">GradientBoost训练</button>
                <span id="train-result-tree"  class="result"></span>
            </li>
        </ul>
    </div>

    <div class="card">
        <div class="card-header">
            输入数据
        </div>
        <div class="card-body">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="row">
                       
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Credit_History</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Credit_History">
                            </div>
                        </div>
                       
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">LoanAmount_log</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="LoanAmount_log">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">ApplicantIncome_log</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="ApplicantIncome_log">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">CoapplicantIncome_log</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="CoapplicantIncome_log">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Loan_Amount_Term_log</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Loan_Amount_Term_log">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Gender_Female</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Gender_Female">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Gender_Male</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Gender_Male">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Married_No</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Married_No">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Married_Yes</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Married_Yes">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Dependents_3</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Dependents_3">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Dependents_0</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Dependents_0">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Dependents_1</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Dependents_1">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Dependents_2</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Dependents_2">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Education_Graduate</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Education_Graduate">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Education_NotGraduate</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Education_NotGraduate">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Self_Employed_No</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Self_Employed_No">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Self_Employed_Yes</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Self_Employed_Yes">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Property_Area_Rural</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Property_Area_Rural">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Property_Area_Semiurban</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Property_Area_Semiurban">
                            </div>
                        </div>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">Property_Area_Urban</span>
                                </div>
                                <input type="text" class="form-control" placeholder="" id="Property_Area_Urban">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <button class="btn btn-info" id="predict-lr">AdaBoost模型预测</button>
                    <span id="predict-result-lr" class="result badge badge-danger"></span>
                </li>
                <li class="list-group-item">
                    <button class="btn btn-success" id="predict-tree">GradientBoost模型预测</button>
                    <span id="predict-result-tree" class="result badge badge-danger"></span>
                </li>
            </ul>
        </div>

    </div>

{% endblock %}

{% block script %}
    <script>
        $('document').ready(function () {
            $('#train-lr').click(function () {
                $.post("{%  url 'demo:api_loan_t_logistic' %}", {}, function (data, status) {
                    $('#train-result-lr').html(data)
                })
            })
            $('#train-tree').click(function () {
                $.post("{%  url 'demo:api_loan_t_tree' %}", {}, function (data, status) {
                    $('#train-result-tree').html(data)
                })
            })

            function get_input(){
                let data = [$('#Credit_History').val(), $('#LoanAmount_log').val(), $('#ApplicantIncome_log').val(), $('#CoapplicantIncome_log').val(), $('#Loan_Amount_Term_log').val(), $('#Gender_Female').val(), $('#Gender_Male').val(), $('#Married_No').val(),
                    $('#Married_Yes').val(), $('#Dependents_3').val(), $('#Dependents_0').val(), $('#Dependents_1').val(), $('#Dependents_1').val(), $('#Education_Graduate').val(), $('#Education_NotGraduate').val(), $('#Self_Employed_No').val(),
                    $('#Self_Employed_Yes').val(), $('#Property_Area_Rural').val(), $('#Property_Area_Semiurban').val(), $('#Property_Area_Urban').val()]
                return data.map(x=>x*1)
            }

            $('#predict-lr').click(function () {
                $.post("{% url 'demo:api_loan_p_logistic' %}", {data: JSON.stringify(get_input())}, function (data, status) {
                    $('#predict-result-lr').html(data)
                })
            })
            $('#predict-tree').click(function () {
                $.post("{% url 'demo:api_loan_p_tree' %}", {data: JSON.stringify(get_input())}, function (data, status) {
                    $('#predict-result-tree').html(data)
                })
            })
        })

    </script>
{% endblock %}